<template>
  <view class="schedule-tab">
    <!-- 筛选栏 -->
    <view class="filters">
      <picker mode="selector" :range="projects" @change="onProjectChange">
        <view class="picker">{{ selectedProject || '全部项目' }}</view>
      </picker>
      <picker mode="selector" :range="groups" @change="onGroupChange">
        <view class="picker">{{ selectedGroup || '全部组别' }}</view>
      </picker>
    </view>
    <!-- 赛程分组列表 -->
    <ScheduleList :groupedSchedule="groupedSchedule" />
  </view>
</template>

<script setup>
  import ScheduleList from '@/components/ClubEvent/ScheduleList/ScheduleList.vue'
  const props = defineProps({
    groupedSchedule: {
      type: Object,
      default: () => ({})
    },
    projects: {
      type: Array,
      default: () => []
    },
    groups: {
      type: Array,
      default: () => []
    },
    selectedProject: String,
    selectedGroup: String
  })
  const emit = defineEmits(['projectChange', 'groupChange'])
  function onProjectChange(e) {
    emit('projectChange', e)
  }
  function onGroupChange(e) {
    emit('groupChange', e)
  }
</script>

<style lang="scss" scoped>
  .schedule-tab {
    .filters {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      background: #2D2E33;
      margin: 20rpx;
      border-radius: 20rpx;

      .picker {
        color: #fff;
        border-radius: 8rpx;
        padding: 8rpx 24rpx;
        font-size: 28rpx;
        border: 2rpx solid #333;
      }
    }
  }
</style>